<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>知识图谱推荐</title>
    <link href="/static/css/styles.css" rel="stylesheet"/>
</head>
<style>
    .nav-item:hover .dropdown-menu {
        display: block;
    }

    #viz {
            width: 1600px;
            height: 600px;
            border: 1px solid lightgray;
            font: 22pt arial;
        }
</style>

<body class="sb-nav-fixed">
    <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
        <a class="navbar-brand ps-3" href="index.html">豆瓣电影推荐系统</a>
        <button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i
                class="fas fa-bars"></i></button>
        <form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
        </form>
        <ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown"
                   aria-expanded="false">
                    <i class="fas fa-user fa-fw"></i>
                    {{ email }}
                </a>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="/login">退出登录</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <div id="layoutSidenav">
        <div id="layoutSidenav_nav">
            <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
                <div class="sb-sidenav-menu">
                    <div class="nav">
                        <div class="sb-sidenav-menu-heading">首页</div>
                        <a class="nav-link " href="/home">
                            <div class="sb-nav-link-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                     class="bi bi-display" viewBox="0 0 16 16">
                                    <path d="M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4c0 .667.083 1.167.25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75c.167-.333.25-.833.25-1.5H2s-2 0-2-2V4zm1.398-.855a.758.758 0 0 0-.254.302A1.46 1.46 0 0 0 1 4.01V10c0 .325.078.502.145.602.07.105.17.188.302.254a1.464 1.464 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.758.758 0 0 0 .254-.302 1.464 1.464 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.757.757 0 0 0-.302-.254A1.46 1.46 0 0 0 13.99 3H2c-.325 0-.502.078-.602.145z"/>
                                </svg>
                            </div>
                            首页
                        </a>
                        <a class="nav-link " href="/search/0">
                            <div class="sb-nav-link-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                     class="bi bi-search" viewBox="0 0 16 16">
                                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                                </svg>
                            </div>
                            搜索
                        </a>
                        <a class="nav-link " href="/personallike">
                            <div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
                            过往评分
                        </a>
                        <div class="sb-sidenav-menu-heading">数据表</div>
                        <a class="nav-link " href="/time_t">
                            <div class="sb-nav-link-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                     class="bi bi-alarm" viewBox="0 0 16 16">
                                    <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
                                    <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
                                </svg>
                            </div>
                            时间分析表
                        </a>
                        <a class="nav-link " href="/rate_t/all">
                            <div class="sb-nav-link-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                     class="bi bi-balloon-heart" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd"
                                          d="m8 2.42-.717-.737c-1.13-1.161-3.243-.777-4.01.72-.35.685-.451 1.707.236 3.062C4.16 6.753 5.52 8.32 8 10.042c2.479-1.723 3.839-3.29 4.491-4.577.687-1.355.587-2.377.236-3.061-.767-1.498-2.88-1.882-4.01-.721L8 2.42Zm-.49 8.5c-10.78-7.44-3-13.155.359-10.063.045.041.089.084.132.129.043-.045.087-.088.132-.129 3.36-3.092 11.137 2.624.357 10.063l.235.468a.25.25 0 1 1-.448.224l-.008-.017c.008.11.02.202.037.29.054.27.161.488.419 1.003.288.578.235 1.15.076 1.629-.157.469-.422.867-.588 1.115l-.004.007a.25.25 0 1 1-.416-.278c.168-.252.4-.6.533-1.003.133-.396.163-.824-.049-1.246l-.013-.028c-.24-.48-.38-.758-.448-1.102a3.177 3.177 0 0 1-.052-.45l-.04.08a.25.25 0 1 1-.447-.224l.235-.468ZM6.013 2.06c-.649-.18-1.483.083-1.85.798-.131.258-.245.689-.08 1.335.063.244.414.198.487-.043.21-.697.627-1.447 1.359-1.692.217-.073.304-.337.084-.398Z"/>
                                </svg>
                            </div>
                            评分分析表
                        </a>
                        <a class="nav-link " href="/address_t">
                            <div class="sb-nav-link-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                     class="bi bi-map" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd"
                                          d="M15.817.113A.5.5 0 0 1 16 .5v14a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 15.01l-4.902.98A.5.5 0 0 1 0 15.5v-14a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0L10.5.99l4.902-.98a.5.5 0 0 1 .415.103zM10 1.91l-4-.8v12.98l4 .8V1.91zm1 12.98 4-.8V1.11l-4 .8v12.98zm-6-.8V1.11l-4 .8v12.98l4-.8z"/>
                                </svg>
                            </div>
                            地图分析表
                        </a>
                        <a class="nav-link" href="/type_t">
                            <div class="sb-nav-link-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                     class="bi bi-back" viewBox="0 0 16 16">
                                    <path d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z"/>
                                </svg>
                            </div>
                            类型分析表
                        </a>
                        <a class="nav-link " href="/actor_t">
                            <div class="sb-nav-link-icon">
                               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bank" viewBox="0 0 16 16">
                                  <path d="m8 0 6.61 3h.89a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H15v7a.5.5 0 0 1 .485.38l.5 2a.498.498 0 0 1-.485.62H.5a.498.498 0 0 1-.485-.62l.5-2A.501.501 0 0 1 1 13V6H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 3h.89L8 0ZM3.777 3h8.447L8 1 3.777 3ZM2 6v7h1V6H2Zm2 0v7h2.5V6H4Zm3.5 0v7h1V6h-1Zm2 0v7H12V6H9.5ZM13 6v7h1V6h-1Zm2-1V4H1v1h14Zm-.39 9H1.39l-.25 1h13.72l-.25-1Z"/>
                                </svg>
                            </div>
                            演员与导演分析表
                        </a>
                        <a class="nav-link" href="/wordcloud">
                            <div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
                            词云图
                        </a>
                        <div class="sb-sidenav-menu-heading">操作</div>
                        <a class="nav-link " href="/tables/0">
                            <div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
                            数据操作
                        </a>
                        <a class="nav-link" href="/recommend">
                        <div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
                        协同滤波推荐界面
                        </a>
                        <a class="nav-link active" href="/graph_recommend">
                            <div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
                            知识图谱推荐界面
                        </a>
                    </div>
                </div>
            </nav>
    </div>
        <div id="layoutSidenav_content">
            <main>
                 <div class="card mb-4 col-lg-6">
                     <div class="card-header">
                        <i class="fas fa-chart-bar me-1"></i>
                        知识图谱推荐图
                    </div>
                     <div class="card-body">
                        <form style="margin-top: 15px" method="post" action="/graph_recommend" class="form-inline ">
                            <div class="form-group mx-sm-3 mb-2">
                                <label for="inputPassword2" class="sr-only"></label>
                                <input name="movie_name" type="text" class="form-control" id="inputPassword2"
                                       placeholder="请输入你喜欢的电影">
                            </div>
                            <button type="submit" style="margin-left: 15px" class="btn btn-primary mb-2">推荐
                            </button>

                         </form>
                         <hr>
                         <div class="card-body">
                                <div id="viz" style="width: 100%;height: 500px;"></div>
                         </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="static/js/neovis.js"></script>
<script>
    var viz;
    var config = {
				container_id: "viz",
				server_url: "bolt://127.0.0.1:7687",
				server_user: "neo4j",
				server_password: "12345678",
                labels: {
                            "movie": {
                                "caption": "name",
                                "font": {
                                    "size":26,
                                    "color":"#000000"
                                                         },
                            },
                             "type": {
                                "caption": "name",
                                "font": {
                                    "size":36,
                                    "color":"#000000"},
                                "community": "community"
                                                         },
                        },
                relationships: {
					"type": {
						"thickness": "1",
						"caption": false
					},
				},
				arrows: true,
				hierarchical: false,
				initial_cypher: "MATCH (n:movie)-[r:type]->(m)<-[j:type]-(i:movie) WHERE n.name='{{ movie_name }}' and i.name IN {{ top_5|safe }} RETURN n,m,i,j,r"

    };
    viz = new NeoVis.default(config);
    viz.render();
    console.log(viz);
</script>
</html>
